<template>
    <div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="社区设置" name="basic">
                <el-card class="system m-t-5">
                    <i class="el-icon-info"></i>
                </el-card>

                <el-form ref="formSystem" :model="formSystem" label-width="100px">
                    <el-form-item label="社区名字.">
                        <el-input ref="name" v-model="formSystem.name" placeholder="请输入社区名字"></el-input>
                    </el-form-item>

                    <el-form-item label="社区电话.">
                        <el-input ref="tel" v-model="formSystem.tel" placeholder="请输入社区电话"></el-input>
                    </el-form-item>

                    <el-form-item label="社区简介.">
                        <Editor :value="editorValue" @change="changeEditor"></Editor>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" icon="el-icon-check" @click="submitSystem">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="微信设置" name="wechat">
                <el-card class="system m-t-5">
                    <i class="el-icon-info"></i>
                    <div>微信公众号设置，登录授权和发送模板消息需要配置 Appid、Appsecret</div>
                </el-card>

                <el-form ref="formWechat" :model="formWechat" label-width="100px">
                    <el-form-item label="Appid.">
                        <el-input ref="appid" v-model="formWechat.appid" placeholder="请输入公众号Appid"></el-input>
                    </el-form-item>

                    <el-form-item label="Appsecret.">
                        <el-input ref="appsecret" v-model="formWechat.appsecret" placeholder="请输入公众号Appsecret">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="success" icon="el-icon-check" @click="submitWechat">保存</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    import Editor from '@/components/Editor'
    import {
        get,
        put
    } from '@/network/request'

    export default {
        name: 'System',
        data() {
            return {
                activeName: 'basic',
                formSystem: {
                    cid: sessionStorage.getItem('cid'),
                    name: '',
                    tel: '',
                    desc: ''
                },
                formWechat: {
                    cid: sessionStorage.getItem('cid'),
                    appid: '',
                    appsecret: ''
                },
                editorValue: '' // 富文本内容
            }
        },
        components: {
            Editor
        },
        mounted() {
            this.$nextTick(() => {
                // 获取信息
                get('/getSystem', {
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.formSystem.name = result.data.name
                        this.formSystem.tel = result.data.tel
                        this.formWechat.appid = result.data.appid
                        this.formWechat.appsecret = result.data.appsecret
                        this.editorValue = result.data.desc
                    }
                }).catch()
            })
        },
        methods: {
            // 富文本内容
            changeEditor(val) {
                this.formSystem.desc = val
            },
            // 提交
            submitSystem() {
                if (this.formSystem.name == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入社区名称',
                        offset: 70
                    })
                    this.$refs['name'].focus()
                    return false
                }

                if (this.formSystem.tel == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入社区电话',
                        offset: 70
                    })
                    this.$refs['tel'].focus()
                    return false
                }

                put('/modifySystem', this.formSystem).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '系统设置修改成功',
                            offset: 70
                        })
                        this.$router.push('/system')
                    }
                }).catch()
            },
            // 提交
            submitWechat() {
                if (this.formWechat.appid == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入公众号Appid',
                        offset: 70
                    })
                    this.$refs['appid'].focus()
                    return false
                }

                if (this.formWechat.appsecret == '') {
                    this.$notify.info({
                        title: '系统提示',
                        message: '请输入公众号Appsecret',
                        offset: 70
                    })
                    this.$refs['appsecret'].focus()
                    return false
                }

                put('/modifyWechat', this.formWechat).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        this.$notify.success({
                            title: '系统提示',
                            message: '系统设置修改成功',
                            offset: 70
                        })
                        this.$router.push('/system')
                    }
                }).catch()
            }
        }
    }
</script>

<style>
</style>